
import React,{Component} from 'react'
import './index.less'
import {Form,Icon,Input,Button,message} from 'antd'
// import {reqLogin,reqHello} from '../../api'

import StrorageUtils from 'utils/storageUtils'
const Item = Form.Item

class Login extends Component {
    
    handleSubmit = e=> {
        e.preventDefault()
        const form  = this.props.form
        // const values = form.getFieldsValue()

        form.validateFields(async (err, {username,password}) => {
            if(!err){
                console.log("Received:",username)
                // const result = await reqLogin(username, password)
                // const result = await reqHello(username)
                
                // console.log(result)
                if(username === "admin" && password === "admin"){
                    const user = {"username":username,"_id":"-1"}
                    StrorageUtils.saveUser(user)
                    message.success("登陆成功")
                    this.props.history.replace('/')

                }else {
                    message.error("用户名或密码输入错误")
                }
            } else {
                // alert("用户名或密码输入错误")
            }
        }
        )

    }
    
    render (){
        const {getFieldDecorator} = this.props.form
        return (
        <div className="login">
            <div className='login-header'>
                <img src='/images/logo.jpg' alt='logo'/>
                <h1>银行营销平台</h1>

            </div>
            <div className='login-content'>
                <h1>用户登陆</h1>
                <Form onSubmit={this.handleSubmit} className="login-form" >
                    <Item>
                        {
                        getFieldDecorator('username',{
                            initialValue:"",
                            rules:[
                                {required: true, whitespace: true, message: "请输入用户名"},
                                {min: 4, message: "用户名不能少于4个"},
                                {max: 12, message: "用户名不能多于12个"},
                                {pattern:/^[a-zA-Z0-9_]+/, message: "必须是英文、数字或下划线组合"},
                            ]
                        })(
                            <Input
                            prefix={<Icon type="user" style={{ color:'rgba(0,0,0,.25' }}/>}
                            placeholder="Username"
                            ></Input>
                        )
                        }
                        
                    </Item>
                    <Item>
                    {
                        getFieldDecorator('password',{
                            initialValue:"",
                            rules:[
                            
                                {required: true, whitespace: true, message: "请输入密码"},
                                {min: 4, message: "密码不能少于4个"},
                                {max: 12, message: "密码不能多于12个"},
                                {pattern:/^[a-zA-Z0-9_]+/, message: "必须是英文、数字或下划线组合"},
                            ]
                        })(
                            <Input
                            prefix={<Icon type="lock" style={{ color:'rgba(0,0,0,.25' }}/>}
                            type="password"
                            placeholder="Password"
                        ></Input>
                        )
                        }
                        

                    </Item>
                    
                    <Item>
                        <Button type="primary" htmlType="submit"  className="login-form-button">
                            登陆
                        </Button>
                    </Item>
                </Form>
            </div>
            Login
        </div>)
    }
}

const WrapperForm = Form.create()(Login)
export default WrapperForm